<template>
  <div class="home_service inner-curve-2 relative weilei_left top_circle get_circle">
    <div class="web_con">
      <div>
        <h1>服务至上</h1>
      </div>
      <CardTrans></CardTrans>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const hello = ref("hello world");
</script>
<style lang="scss" scoped>
.inner-curve-2 {
  background: white;
  position: relative;
  z-index: 3;
  margin: auto;
  width: 100%;
  --r: 20px;
  --s: 40px;
  --a: 20deg;

  --_m: 0 / calc(2 * var(--r)) var(--r) no-repeat
    radial-gradient(50% 100% at bottom, #000 calc(100% - 1px), transparent);
  --_d: (var(--s) + var(--r)) * cos(var(--a));
  mask: calc(50% + var(--_d)) var(--_m), calc(50% - var(--_d)) var(--_m),
    radial-gradient(
        var(--s) at 50% calc(-1 * sin(var(--a)) * var(--s)),
        transparent 100%,
        #000 calc(100% + 1px)
      )
      0 calc(var(--r) * (1 - sin(var(--a)))),
    linear-gradient(
      90deg,
      #000 calc(50% - var(--_d)),
      transparent 0 calc(50% + var(--_d)),
      #000 0
    );
  mask-repeat: no-repeat;
  transform: translateY(-50px);
}

.home_service {
  // &.get_circle {
  //   transform: translateY(-90px);
  //   background-color: transparent;
  //   background-image: radial-gradient(
  //     circle at 50% 0px,
  //     transparent 40px,
  //     // 开始过渡点提前5px
  //     white 45px // 结束过渡点延后5px，形成10px的渐变区域
  //   );
  // }
  //   &.weilei_left {
  //     transform: translateY(-90px);
  //     background-color: transparent;
  //     height: 100px;
  //     background-image: radial-gradient(
  //       circle at 20% 0px,
  //       transparent 40px,
  //       rgb(255, 255, 255) 0px
  //     );
  //   }

  .element {
    width: 200px;
    height: 200px;
    background: radial-gradient(
      circle,
      transparent 50px,
      black 50px,
      black 60px,
      transparent 60px
    );
  }
}
</style>
